<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 题目要求: 设置下拉框中的默认随机选中项，自己书写结构和js。 -->
    <input type="button" value='随机选择菜品' id="btn">
    <br>
    <select id="menuSelection">
        <option>番茄炒蛋</option>
        <option>青椒肉丝</option>
        <option>凉拌黄瓜</option>
        <option>夫妻肺片</option>
        <option>蛋炒饭</option>
        <option>关东煮</option>
        <option>干锅虾</option>
        <option>火锅</option>
        <option>奶茶</option>
    </select>
    <script src="common.js"></script>
    <script>
        // 获取元素
        // var btn = document.getElementById('btn');
        var btn = my$("btn");
        var menuSelection = my$('menuSelection')
        var opts = menuSelection.children;

        // 点击事件
        btn.onclick = function() {
            //在规定范围内的随机数
            //Math.random()  [0,1)
            //Math.random() * opts.length  [0,8)
            //Math.floor(Math.random() * opts.length);  [0,7]
            var idx = Math.floor(Math.random() * opts.length);
            // console.log(idx);
            // 将得到的随机数做为下标给opts数组,并给予selected选中属性为true,该下标的菜品就被选中
            opts[idx].selected = true
        }
    </script>
</body>

</html>